// *******************************************************************************************************
// # mixin - export to core.scss to xxxxxxx
//   引数や関数で出力するモジュール
//   ※計算が不要なものはextendかplaceholderで
// *******************************************************************************************************

// # defined mixins
// --------------------------------------------------------
// 以下定義済の汎用mixin

// ## CSS Sprite
// --------------------------------------------------------
// 引数でスプライト画像や元画像のパスを設定
// @extend %sprite;
// @include spriteBackground(画像名); ※画像名はアルファベットから
// @extend %imgReplace; ※置換する場合
// layout が smart or diagonal の場合は spacing 無効 horizontal or vertical
// verticalだと画像名の連番で並ばない

// ## ヘッダーの簡単検索
// --------------------------------------------------------
$spritesEasySearch     : sprite-map("btn_easy_search/*.png", $layout: smart);
$spritesEasySearch-img : sprite-url($spritesEasySearch);
$spriteEasySearch-width: image-width("btn_easy_search.png");
$spriteEasySearch-height: image-height("btn_easy_search.png");

@mixin spriteEasySearchBackground($name) {
	width : image-width(sprite-file($spritesEasySearch, $name));
	height: image-height(sprite-file($spritesEasySearch, $name));
	$xpos : round(nth(sprite-position($spritesEasySearch, $name), 1));
	$ypos : round(nth(sprite-position($spritesEasySearch, $name), 2));
	background-position: $xpos $ypos;
}

// ## スターアイコン
// --------------------------------------------------------
$spritesStar     : sprite-map("icon/icn_star/*.png", $layout: smart);
$spritesStar-img : sprite-url($spritesStar);
$spriteStar-width: image-width("icon/icn_star.png");
$spriteStar-height: image-height("icon/icn_star.png");

@mixin spriteStarBackground($name) {
	width : image-width(sprite-file($spritesStar, $name));
	height: image-height(sprite-file($spritesStar, $name));
	$xpos : round(nth(sprite-position($spritesStar, $name), 1));
	$ypos : round(nth(sprite-position($spritesStar, $name), 2));
	background-position: $xpos $ypos;
}

// ## チェックボックスとラジオボタン
// --------------------------------------------------------
$spritesInput     : sprite-map("input/*.png", $layout: smart);
$spritesInput-img : sprite-url($spritesInput);
$spriteInput-width: image-width("input.png");
$spriteInput-height: image-height("input.png");

@mixin spriteInputBackground($name) {
	width : image-width(sprite-file($spritesInput, $name));
	height: image-height(sprite-file($spritesInput, $name));
	$xpos : round(nth(sprite-position($spritesInput, $name), 1));
	$ypos : round(nth(sprite-position($spritesInput, $name), 2));
	background-position: $xpos $ypos;
}

